<template>
  <div>
    <p class="ivu-mt-8" style="font-size: 12px; margin-left: 200px; margin-top: 50px;">
      <span class="ivu-badge-status ivu-badge">
        <span class="ivu-badge-status-dot ivu-badge-status-processing"></span>
        <!-- <span class="ivu-badge-status-text"></span> -->
      </span>
      <!-- <span>{{number}}</span> 秒后更新 -->
    </p>
    <div ref="profileMap" class="profile-map" :style="{width: '500px', margin: 'auto', height: '500px'}"></div>
  </div>
</template>
<script>
  import echarts from "echarts"
  export default {
    name: "profileMap",
    head() {
      return {
        title: '柱状图'
      }
    },
    props: {
      piedata: {
        type: Array,
        default() {
          return []
        }
      }
    },
    created() {
    },
    data() {
      return {
        datalist: [],
        number: 5,
        timer: null
      }
    },
    watch: {
      'piedata'() {
        this.piedata.length && this.piedata.map((item) => {
          this.datalist.push(item.name)
        });
        this.init()
      },
    },
    mounted() {
      this.piedata.length && this.piedata.map((item) => {
        this.datalist.push(item.name)
      });
      this.init()
      // this.getSecond(5)
    },
    methods: {
      // 倒计时
      getSecond() {
        const DOWNCOUNT = 5
        if (!this.timer) {
          this.number = DOWNCOUNT
          this.timer = setInterval(() => {
            if (this.number > 1 && this.number <= DOWNCOUNT) {
              this.number--
            } else {
              this.number = DOWNCOUNT
            }
          }, 1000)
        }

      },
      init() {
        var that = this
        var chart = this.$echarts.init(this.$refs.profileMap);
        var option = {
          backgroundColor: '#fff',
          tooltip: { //提示框组件
            trigger: 'axis',
            // formatter: '百分比: {c0}<br />',
            formatter: (params, ticket, callback) => {
              let percent = ((params[0].data / 216) * 100).toFixed(1)
              return '百分比: ' + percent + '%<br />'
            },
            axisPointer: {
              type: 'shadow',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12,
            }
          },
          grid: {
            top: '15%',
            right: '10%',
            left: '10%',
            bottom: '12%'
          },
          xAxis: [{
            type: 'category',
            color: '#59588D',
            data: ['2016', '2017', '2018', '2019', '2020'],
            axisLabel: {
              margin: 20,
              color: '#999',
              textStyle: {
                fontSize: 18
              },
            },
            axisLine: {
              lineStyle: {
                color: '#d2d2d2',
              }
            },
            axisTick: {
              show: false
            },
          }],
          yAxis: [{
            // min: 0,
            // max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#999',
              textStyle: {
                fontSize: 18
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(107,107,107,0.37)',
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
              }
            }
          }],
          series: [{
            type: 'bar',
            data: [40, 90, 10, 20, 56],
            barWidth: '25px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FF9A22' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFD56E' // 100% 处的颜色
                }], false),
                // barBorderRadius: [30, 30, 0, 0],
                barBorderRadius: 50,
                borderWidth: 0,
              }
            },
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold',
              position: 'top',
              color: '#FF9A22',
              // formatter: '{c}%'
            }
          }]
        };
        chart.setOption(option);
        this.getSecond(5)
        // 在渲染点击事件之前先清除点击事件
        chart.off('click');
        // 再向外触发点击事件
        // chart.on('click', function (params) {
        //   this.$emit('onPieChartsClick', params)
        // });
        // 自适应
        window.onresize = function () {
          chart.resize();
        }
      }
    }
  }
</script>
<style scoped>
  .profile-map {
    width: 100%;
    height: 500px;
  }

  /* .ivu-badge-status {
    line-height: inherit;
    vertical-align: baseline;
  }

  .ivu-badge {
    position: relative;
    display: inline-block;
  } */

  .ivu-badge-status-processing {
    background-color: #2d8cf0;
    position: relative;
  }

  .ivu-badge-status-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }



  .ivu-badge-status-processing:after {
    position: absolute;
    /* top: -1px;
    left: -1px; */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #2d8cf0;
    content: "";
    animation: aniStatusProcessing 1.2s ease-in-out infinite;
  }

  @keyframes aniStatusProcessing {
    0% {
      transform: scale(.8);
      opacity: .5
    }

    to {
      transform: scale(2.4);
      opacity: 0
    }
  }
</style>